<template>
	<view class="content">
		<view class="shop" v-if="list.length > 0">
			<van-checkbox-group :value="checkbox" @change="onChange">
				<van-swipe-cell v-for="(item,index) in list" :key="index" :right-width="50">
					<view class="list">
						<van-checkbox checked-color="#dc261b" icon-size="16px" :name="item.pid" />
						<view class="goods">
							<view class="image">
								<image :src="item.url"></image>
							</view>
							<view class="text">
								<h2>{{item.pName}}</h2>
								<span>{{item.userIntended}}</span>
							</view>
						</view>
						<view class="add">
							<van-stepper :value="item.num" @change="onChangeStepper($event,item)" />
						</view>
					</view>
					
					<view slot="right" class="del" @tap="del(item,index)"><span>删除</span></view>
				</van-swipe-cell>
			</van-checkbox-group>
		</view>
		<view class="fixed" v-if="list.length > 0">
			<view class="line">
				<view class="all">
					<van-checkbox checked-color="#dc261b" :value="checked" @change="onChangeAll">全选</van-checkbox>
				</view>
				<view class="total">已选{{checkbox.length}}件</view>
			</view>
			<view class="button" @click="submit">预定</view>
		</view>
		<!--暂无数据-->
		<prompt v-if="!list.length > 0"></prompt>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				checkbox: [],
				checked: false
			}
		},
		onShow() {
			this.query()
		},
		methods: {
			query() {
				this.$api({
					url: `/sc/list/1`,
					method: "POST",
				}).then(res => {
					this.list = res.list
				}).catch(()=>{
					this.list=[]
				})
			},
			onChange(event) {
				this.checkbox = event.detail
			},
			onChangeAll(event) {
				this.checked = event.detail
				if (this.checked) {
					this.checkbox = []
					this.list.forEach(item => {
						this.checkbox.push(item.pid.toString())
					})
				}
			},
			onChangeStepper(event, item) {
				console.log(event, item)
				item.num = event.detail
				this.$api({
					url: `/sc/edit`,
					method: "POST",
					content: 'application/x-www-form-urlencoded',
					data: {
						pid: item.pid,
						num: item.num
					}
				})
			},
			del(item,index){
				this.$api({
					url: `/sc/del/${item.cartId}`,
					method: "POST",
					content: 'application/x-www-form-urlencoded',
					data: {
						pid: item.pid,
						num: item.num
					}
				}).then(res=>{
					this.query()
					this.checkbox = this.checkbox.filter((x) => Number(x) !== Number(item.pid));
					console.log(111,this.checkbox)
				})
			},
			submit(){

				if(this.checkbox.length>0){
					const data = []
					this.checkbox.forEach(item=>{
						this.list.forEach(item2=>{
							if(Number(item)===item2.pid){
								data.push(item2)
							}
						})
					})
					
					uni.setStorageSync('shopList',data)
					uni.navigateTo({
						url:'../order/confirm-order'
					})
				}else{
					uni.showToast({
					    title: '请先选择商品',
					    duration: 2000,
						icon:'none'
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.shop {
		padding-bottom: 130rpx;
	}

	.list {
		display: flex;
		align-items: center;
		position: relative;
		padding: 30rpx;
		background: #fff;
		margin: 20rpx 0 0;

		
	}

	.choice {
		width: 36rpx;

		.wx-checkbox-input {
			width: 36rpx;
			height: 36rpx;
			border: 2rpx solid #999;
			border-radius: 100%;

			&.wx-checkbox-input-checked {
				background: #dc261b;
				border-color: #dc261b;

				&:before {
					font-size: 30rpx;
					color: #fff;
				}
			}
		}
	}

	.goods {
		display: flex;
		align-items: center;
		flex: 1;

		.image {
			margin: 0 24rpx;

			image {
				width: 152rpx;
				height: 152rpx;
			}
		}

		.text {
			flex: 1;

			h2 {
				height: 80rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			span {
				display: block;
				margin: 10rpx 0 0;
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.add {}

	.fixed {
		width: 750rpx;
		display: flex;
		background: #fff;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;

		.line {
			flex: 1;
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			border-top: 2rpx solid #f1f1f1;
			border-bottom: 2rpx solid #f1f1f1;
			color: #333;

			.all {
				flex: 1;
				font-size: 28rpx;

				.wx-checkbox-input {
					width: 36rpx;
					height: 36rpx;
					border: 2rpx solid #999;
					border-radius: 100%;
					margin: -4rpx 20rpx 0 0;

					&.wx-checkbox-input-checked {
						background: #dc261b;
						border-color: #dc261b;

						&:before {
							font-size: 30rpx;
							color: #fff;
						}
					}
				}
			}

			.total {
				font-size: 28rpx;
			}
		}

		.button {
			width: 200rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			background: #dc261b;
			color: #fff;
		}
	}


	.del {
		color: #fff;
		height: 100%;
		width: 94rpx;
		background: #dc261b;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
